<template>
  <view>
		<view class="header">
			<!-- zuo -->
			<view class="content">
				<view class="image"><image class="img" src="../../static/发现.png" mode=""></image></view>
				<view class="cont">
					<text class="txt1">18082932948</text>
					<text class="txt2">180****2948</text>
				</view>
			</view>
			<!-- you -->
			<view class="content1">
				<text class="txt1">暂未开通会员</text>
				<text class="txt2">会员有效期至{{timeEnd}}</text>
			</view>
		</view>

    <swiper class="swiper-container" :autoplay="false" :duration="500" :circular="true" :previous-margin="prevMargin" :next-margin="nextMargin" @change="change">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.img" class="img"></image>
        <view class="swiper-item" :style="{ background: item.sty }">
					<view class="swiper-card" :class="idex" v-for="(card,idex) in item.cards" :key="idex">
					 <text v-for="(text, idx) in card.texts" :key="idx" class="swiper-text" :class="card.styles[idx]">{{ text }}</text>
					</view>
				</view>
      </swiper-item>
    </swiper>
		<view class="consit">
			<text class="title">会员专属权益</text>
			<view class="cardFour">
				<view class="card" v-for="(item,index) in card" :key="index">
					<view class="content">
						<view class="cot"><text class="txt1">{{item.title}}</text><view class="zx" v-show="index == 0">专享</view></view>
						<text class="txt2">{{item.jie}}</text>
					</view>
					<view class="image">
						<image class="img" :src="item.url" mode=""></image></view>
				</view>
			</view>
		</view>
		<view class="con">
			<text class="title">会员额外专享权益</text>
			<view class="cardTwo">
					<view class="content">
						<text class="txt1">专属会员商品</text>
						<text class="txt2">每月15号，专属商品低折扣</text>
						<button class="btn">了解更多</button>
					</view>
					<view class="content1">
						<text class="txt1">下单免费扔</text>
						<text class="txt2">生活垃圾免费代扔</text>
						<button class="btn1">前去下单</button>
					</view>
			</view>
		</view>
		<view class="conse">
			<text class="title">选择会员类别</text>
			<view class="hTwo">
				<view class="content">
					<view class="cont">{{huiyuan}}卡会员标准版
						<view class="cont1">每月15次免费代扔垃圾服务，3kg以内</view>
					</view>
					<view class="cont2" :class="{ 'selector-selected': selector1Selected }" @click="selectSelector(1)"> <image src='/static/打勾.png' class="image"></image> </view>
				</view>
				<view class="content">
					<view class="cont">{{huiyuan}}卡会员豪华版
						<view class="cont1">每月31次免费代扔垃圾服务，3kg以内</view>
					</view>
					<view class="cont2" :class="{ 'selector-selected': !selector1Selected }" @click="selectSelector(2)"> <image src='/static/打勾.png' class="image"></view>
				</view>
			 <view class="container">
			    <view class="left-container">
			      <view class="gradient-bg"></view>
			      <text class="price-big">￥{{yuan}}</text>
			      <text class="price-small">/月</text>
						<view class="trapezoid">
			        <text class="price-white">￥{{yiqyuan}}</text>
			        <view class="line"></view>
			      </view>
						<view class="right-container">
			     
			      <text class="promote-text" @click="openMembership">开通立省</text>
			    </view>
			    </view>
			    
			  </view>
				
			</view>
		</view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [
				{ 
					cards:[{
						texts: ['门清月卡会员', '开通会员立即省钱'],
						styles: ['style1', 'style2'],
					},
					{
						texts: ['标准版:39.9/月', '立即开通'],
						styles: ['style3', 'style4']
					}],
					sty:'#c9beac',
					img:'../../static/vip2.png'
        },
				
        { 
					cards:[{
						texts: ['门清季卡会员', '开通会员立即省钱'],
						styles: ['style1', 'style2']
					},{
						texts: ['标准版:119/季', '立即开通'],
						styles: [ 'style3', 'style4']
					}],
					sty:'#c0c8d7',
					img:'../../static/vip2.png'
        },
				
        { 
					cards:[{
						texts: ['门清年卡会员', '开通会员立即省钱'],
						styles: ['style1', 'style2']
					},{
						texts: ['标准版:458/年', '立即开通'],
						styles: [ 'style3', 'style4']
					}],
					sty:'#e4c8c4',
					img:'../../static/vip2.png'
        }],
			timeEnd:'',
      prevMargin: '50rpx',
      nextMargin: '50rpx',
			card:[
			{title:'免费代扔',jie:'生活垃圾，免费代扔',url:'../../static/114订单、订单明细、收支明细.png'},
			{title:'快速咨询',jie:'快速咨询，迅速响应',url:'../../static/bj联系.png'},
			{title:'会员专享',jie:'享受会员超低折扣',url:'../../static/bj确认.png'},
			{title:'尊贵标识',jie:'独特的会员图标',url:'../../static/bj商城.png'}],
			huiyuan:'月',
			yuan:39.9,
			yiqyuan:73.5,
			selector1Selected:true,
    };
  },
	methods:{
		change(e){
			console.log(e);
			this.selector1Selected = true;
			switch(e.detail.current){
				case 0:{this.huiyuan = '月';this.yuan = 39.9;this.yiqyuan = 73.5}break;
				case 1:{this.huiyuan = '季';this.yuan = 119;this.yiqyuan = 220.5};break;
				case 2:{this.huiyuan = '年';this.yuan = 458;this.yiqyuan = 882.0};break;
			}
		},
		selectSelector(num){
			if(num == 1 && this.selector1Selected == true){
				this.selector1Selected = true;
			}else if(num == 1 && this.selector1Selected == false){
				this.selector1Selected = true;
				if(this.huiyuan == '月'){
					this.yuan = 39.9;
					this.yiqyuan = 73.5;
				}else if(this.huiyuan == '季'){
					this.yuan = 119;
					this.yiqyuan = 220.5;
				}else if(this.huiyuan == '年'){
					this.yuan = 458;
					this.yiqyuan = 882;
				}
			}else{
				this.selector1Selected = false;
				if(this.huiyuan == '月'){
					this.yuan = 59.9;
					this.yiqyuan = 147;
				}else if(this.huiyuan == '季'){
					this.yuan = 159;
					this.yiqyuan = 441;
				}else if(this.huiyuan == '年'){
					this.yuan = 636;
					this.yiqyuan = 1764;
				}
			}
			
		},
		 openMembership() {
		    // 在这里执行开通会员的业务逻辑
		    // 可以调用相关的API或发起网络请求来实现开通会员的操作
		
		    // 示例：模拟开通会员成功后的处理
		    this.$uni.showToast({
		      title: '恭喜，会员开通成功',
		      icon: 'success'
		    });
		  }
	}
};
</script>
`
<style lang="scss" scoped>
.header{
	width: 100vw;
	height: 25vh;
	background-color: #343434;
	border: 1px solid #ccc;
	border-radius: 0 0 200rpx 200rpx;
	display: flex;
	padding: 80rpx;
	
	.content{
		display: flex;
		height: 60%;
		margin-right: 60rpx;
		
		.image{
			width: 100rpx;
			height: 100rpx;
			border: 1px solid #000;
			border-radius: 50rpx;
			margin-right: 10rpx;
			background-color: white;
			
			.img{
				width: 100%;
				height: 100%;
			}
		}
		
		
		.cont{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		
	}
	.content1{
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}
	.txt1{
		color: white;
		font-size: 34rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}
	.txt2{
		color: white;
	}
	
	
}
	
	
.swiper-container {
  width: 100%;
  height: 270rpx; /* 替换为你希望的高度 */
	position: relative;
	top: -70rpx;
	
	.img{
		width: 100rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		left: 0;
		margin-top: 30rpx;
		margin-left: 14rpx;
		border-radius: 0 20rpx 20rpx 0;
	}
		
	.swiper-item {
		width: 96%;
		height: 100%;
		margin: 0 auto;
		// text-align: center;
		border: 1px solid #343434;
		box-shadow:-1px -1px #55557f,2rpx 2rpx 2rpx #808080;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		
		
		
		.swiper-card{
			display: flex;
			flex-direction: column;
			margin: 40rpx 40rpx;
			margin-top: 80rpx;
		}
		
	}
	.style1 {
		font-size: 42rpx;
		color:#706b4f;
		font-weight: bold;
	}

	.style2 {
		color: #bb9969;
		font-weight: bold;
		font-size: 30rpx;
		
	}

	.style3 {
		color: #252426;
		// text-decoration: underline;
		font-size: 30rpx;
	}

	.style4 {
		font-size: 36rpx;
		margin-top: 10rpx;
		text-align: center;
		color: #b8a281;
		background-color: #625d3f;
		line-height: 60rpx;
		border-radius: 50rpx;
	}
}
.title{
	font-size: 41rpx;
	font-weight:bold;
}
.consit{
	margin-top: -30rpx;
	padding-left: 20rpx;
}
.cardFour{
	width: 100%;
	height: 30vh;
	display: flex;
	flex-wrap: wrap; 
	align-items: center;
	justify-content: center;
	align-content: flex-start;
	margin-bottom: 15rpx;
	
	.card{
		width: 46%;
		height: 200rpx;
		border: 1px solid #ddd;
		margin-right: 28rpx;
		margin-top: 20rpx;
		display: flex;
		padding: 10rpx;
		border-radius: 10rpx;
		box-shadow:-1px 1px #55557f,4rpx 4rpx 16rpx #b3b3b3;
		
		.content{
			display: flex;
			
			flex-direction: column;
			padding: 10rpx;
			width: 250rpx;
			
			.cot{
				margin-bottom: 15rpx;
				display: flex;
				
				.txt1{
					font-size: 30rpx;
				}
				.zx{
					margin-left: 10rpx;
					border-radius: 13rpx;
					color: white;
					border: 1px solid #aaa;
					background-color: orange;
				}
			}
		}
		.image{
			width: 90rpx;
			height: 80rpx;
			border: 1px solid #000;
			border-radius: 40rpx;
			margin: auto;
			margin-left: 15rpx;
			margin-right: 5rpx;
			background-color: white;
			
			.img{
				width: 100%;
				height: 100%;
			}
		}
	}
}
.con{
	margin-top: 100rpx;
	padding-left: 20rpx;
	margin-bottom: 100rpx;
	.cardTwo{
		width: 100%;
		/* height: 10vh; */
		display: flex;
		flex-wrap: wrap; 
		align-items: center;
		justify-content: center;
		align-content: flex-start;
		
		.content{
			display: flex; 
			flex-direction: column;
			padding: 20rpx;
			width: 45%;
			margin: 10rpx;
			height: 250rpx;
			border: 1px solid #000;
			background-color: orange;
			border-radius: 30rpx;
			box-shadow:-1px 1px #55557f,4rpx 4rpx 16rpx #b3b3b3;
		}
		.content1{
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			width: 340rpx;
			margin: 10rpx;
			height: 250rpx;
			border: 1px solid #000;
			background-color: #00557f;
			border-radius: 30rpx;
			box-shadow:-1px 1px #55557f,4rpx 4rpx 25rpx #b3b3b3;
		}
		.txt1{
				font-size: 34rpx;
				font-weight:bold;
				color: white;
				margin-bottom:15rpx;
			}
			.txt2{
				font-size: 27rpx;
				color: white;
				margin-bottom: 20rpx;
			}
			.btn{
				border: white;
				font-size: 26rpx;
				line-height: 60rpx;
			}
			.btn1{
				border: white;
				font-size: 26rpx;
				line-height: 60rpx;
				position: relative;
				top: 35rpx;
			}
		
	}
	
}
.conse{
	margin-top: -70rpx;
	padding-left: 20rpx;
	margin-bottom: 100rpx;
	
	.content{
		margin-bottom: 20rpx;
		border-bottom: 1px solid #efefef;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		.cont{
			font-size: 36rpx;
			padding: 5rpx;
			font-weight: bold;
			
			.cont1{
				font-weight: normal;
				margin-top: 12rpx;
				font-size: 32rpx;
			}
		}
		
		.cont2{
			width: 60rpx;
			height: 60rpx;
			background-color: 20rpx;
			border-radius:50%;
			border: 1px solid #333;
			margin:auto 20rpx;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
		.selector-selected{
			background-color: green;
		}
	}
}
.container {
  margin-top: 60rpx;
  align-items: center;
  height: 180rpx;
	
	
	.left-container {
		width: 990rpx;
		height: 100rpx;
		position: relative;
		display: flex;
		align-items: center;
		z-index: -1;
		padding:20rpx;
		
		.gradient-bg {
		  position: absolute;
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  background: linear-gradient(to right, gold, white);
			/* background-color:gold; */
			border-radius: 50rpx;
		  z-index: -1;
			
		}
		
		.price-big {
		  font-size: 50rpx;
		  font-weight: bold;
		  color: #333;
		  margin-right: 5px;
		}
		
		.price-small {
		  font-size: 14px;
		  color: #333;
		}
		
		.trapezoid {
		  position: relative;
		  width: 80px;
		  height: 30px;
		  
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
		
		.price-white {
		  font-size: 18px;
		  margin-right: 5px;
		}
		
		.line {
		  width: 60px;
		  height: 1px;
		  background-color: #000000;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		}
	}
	.right-container {
		width:500rpx;
		height: 120rpx;
	  display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		background-color: #333;
		color: #fff;
		clip-path: polygon(0 0, 100% 0%, 80% 100%, 20% 100%);
		
		.promote-text {
		  font-size: 48rpx;
		}
	}
	
}



</style>